<template>
  <div>
    <a-card :bordered="false">
      <div class="table-page-search-wrapper">
        <a-row :gutter="12">
          <a-col v-has="'admin:parkCode'"  :md="4" :sm="8">
            <a-select  :value="ParkCode" :options="ParkOptions" @change="ParkSelect" style="width: 200px">
            </a-select>
          </a-col>
          <a-col :md="4" :sm="8">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </div>

    </a-card>
    <a-card
        :bordered="false"
        title="异常出场分析"
    >
      <div class="chartWrap" id="TotalAbnormalChartWrap" style="height:500px"></div>
    </a-card>
  </div>
</template>
<script>
import {getAction, httpAction} from "@api/manage";
import {filterObj} from "@/utils/util";
import * as echarts from "echarts";

export default {
  name: "TotalAbnormalChart",
  data() {
    return{
      ParkCode:'',
      ParkOptions:[{value:'',label:'请选择停车场'}],
      queryParam: {
        "type": "-1",
      },
      url:{
        ParkList:'/parking/parkInfo/list',
        list:'/parkcar/parkCarOutAbnormalLog/getAbnormalLog'
      },
      MyChartXData:[],
      MyChartYData:[],
      currentStartTimeMillis:0,
      currentEndTimeMillis:0,
    }
  },
  mounted() {
    this.loadParkData()
    this.ReCreateChart()
  },
  computed:{
  },
  methods: {
    ReCreateChart(){
      this.$nextTick(()=>{
        this.chartCreate();
      })
    },
    searchQuery() {
      this.chartCreate();
    },

    getQueryParams() {
      var param = Object.assign({});
      param.parkCode = this.ParkCode
      return filterObj(param);
    },
    searchReset: function () {
      this.ParkCode = ''
      this.queryParam = {}
      this.chartCreate();
    },
    ParkSelect(value){
      this.ParkCode = value
    },
    loadParkData() {
      var Params = {}
      httpAction(this.url.ParkList,Params,"get").then((res)=>{
        if(res.success)
        {
          this.ParkOptions =[{value:'',label:'请选择停车场'}]
          res.result.records.forEach((park)=>{
            this.ParkOptions.push({
              value: park.parkCode,
              label: park.parkName
            })
          })
          this.ParkCode = this.ParkOptions[0].value
        }
      })
    },
    chartCreate(){
      this.ResetChart()
      const Params = this.getQueryParams();
      getAction(this.url.list,Params).then( (res)=>{
        if(!document.getElementById('TotalAbnormalChartWrap'))
        {
          return
        }
        const myChart = echarts.init(document.getElementById('TotalAbnormalChartWrap'));
        var total = 0;
        this.ResetChart();
        console.log(res);
        res.result.forEach((item)=>{
          console.log(item);
          this.MyChartXData.push(String(item.time))
          this.MyChartYData.push(String(item.abnormalNumber))
          total += item.abnormalNumber
        })
        myChart.setOption({
          title:{
            text:'车辆异常出场统计（总计：{num|'+total+'}次）',
            textStyle:{
              rich:{
                num:{
                  color:'#000000',
                  fontWeight:'bold',
                  fontSize:18
                }
              }
            },
            left:'center'
          },
          grid:{
            left:'5%',
            right:'5%'
          },
          xAxis: {
            data: this.MyChartXData,
            nameGap:15,
            axisLabel: {
              interval:0,
              rotate:40
            }
          },
          yAxis: [
            {axisLabel:{
                formatter:(value) =>{
                  return value + '次'
                }
              },
              splitNumber:10
            }],
          series: [
            {
              name:'当日',
              type: 'line',
              data: this.MyChartYData,
              smooth:true,
              areaStyle:{
                color:{
                  type:'linear',
                  x:0,
                  y:0,
                  x2:0,
                  y2:1,
                  colorStops:[
                    {
                      offset:0,color:'rgba(207, 223, 255, 1)'
                    },
                    {
                      offset:1,color:'rgba(255, 255, 255, 1)'
                    }
                  ]
                }
              },
              lineStyle:{
                color:'rgb(90,148,255)'
              },
              itemStyle:{
                color:'rgba(90, 148, 255, 1)'
              }
            },
          ],
          tooltip:{
            trigger: 'axis',
            backgroundColor:'rgba(53, 109, 249, .8)',
            formatter:'{b}<br />当日：{c}辆',
          }
        });
        window.clearTimeout()
        setTimeout(function (){
          window.onresize = function () {
            myChart.resize();
          }
        },300)
      })
    },
    ResetChart(){
      this.MyChartXData=[]
      this.MyChartYData=[]
    },
  }
}
</script>

<style scoped>
@import '~@assets/less/common.less';
</style>